<template>
  <el-dialog :visible="isPop" title="添加工资表" width="500px" @close="onClose" custom-class="salarySheetPop" @open="onOpen">
    <el-form :model="form" ref="form" label-width="auto" inline label-suffix="：" :rules="rules">
      <el-form-item label="工资名称" prop="name">
        <el-input class="maxSelect" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="所属公司" prop="subId">
        <el-select v-model="form.subId" class="maxSelect" filterable @change="onChange">
          <el-option v-for="item in companyList" :key="item.subid" :value="item.subid" :label="item.subName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工资表模板" prop="stId">
        <el-select v-model="form.stId" class="maxSelect" filterable>
          <el-option v-for="item in countTemArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="onClose">取消</el-button>
      <el-button type="primary" @click="onNext" :loading="loading || operationLoading.GenerateWages">下一步</el-button>
    </template>
  </el-dialog>
</template>
<script>
import { errorMessage } from "@/util/xc/utils";
import { mapMutations, mapState } from "vuex";

export default {
  name: "salarySheetPop",
  props: {
    isPop: {
      type: Boolean,
      required: true,
      default: false
    },
    temArr: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      form: {
        stId: ""
      },
      rules: {
        name: { required: true, message: "请输入工资名称" },
        subId: { required: true, message: "请选择所属公司" },
        stId: { required: true, message: "请选择工资表模板" }
      },

      loading: false
    };
  },
  computed: {
    ...mapState({
      companyList: state => state.reward.companyList,
      operationLoading: state => state.setStorage.operationLoading
    }),
    countTemArr() {
      console.log(this.temArr, this.form.subId);
      return this.temArr.filter(item => item.subId == this.form.subId);
    }
  },
  methods: {
    ...mapMutations(["setOperationLoading"]),
    onChange() {
      this.form.stId = "";
    },
    onClose() {
      this.$emit("update:isPop", false);
    },
    async onNext() {
      try {
        this.loading = true;
        this.setOperationLoading({ key: "GenerateWages", val: true });
        await this.verify();

        await this.generateWages();

        // this.$emit("next", data);
        this.onClose();
      } catch (message) {
        errorMessage(message);
        this.setOperationLoading({ key: "GenerateWages", val: false });
      } finally {
        this.loading = false;
      }
    },
    async generateWages() {
      // return new Promise((resolve) => setTimeout(resolve, 2000));
      const { name, stId, subId } = this.form;
      const { year, month } = this?.$parent?.getYearMonth();
      const params = { name, stId, subId, year, month };
      console.log(params);
      await this.$api.smartSalary.generateWages(params).then(res => res.data);
      // this.$store.commit("SET_WAGES_DATA", data);
      this.$message({ message: "工资表正在生成中", type: "success" });
    },
    verify() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate(valid => {
          if (valid) resolve(JSON.parse(JSON.stringify(this.form)));
          else reject("验证不通过");
        });
      });
    },
    onOpen() {}
  },
  mounted() {}
};
</script>
<style lang="less">
.salarySheetPop {
  .el-form {
    display: flex;
    flex-direction: column;
  }
  .maxSelect {
    width: 200px;
  }
}
</style>
